<style rel="styleesheet" lang="less">
  @media screen and (min-width: 829px) {
    .training {
      overflow: hidden;
      width: 100%;
      background:rgba(251,251,254,1);
      padding-bottom: 6rem;
      position: relative;
      .active {
        color: #F37D0A
      }
      .btn-box,
      .type {
        display: none
      }
      .wrapTraining {
        width: 80%;
        height: 100%;
        margin: 0 auto;
        .kind {
          margin-top: 3.5rem;
          margin-bottom: 1rem;
          height: 2.43rem;
          ul {
            position: relative;
          }
          ul li {
            float: left;
            font-size: 1.57rem;
            cursor: pointer;
            margin-right: 3.5rem;
          }
          ul li:last-child {
            margin-right: 0
          }
          ul .active {
            color: #F37D0A;
          }
        }

        .content li {
          clear: both;
          width: 100%;
          height: 21.5rem;
          border-radius: 0.43rem;
          margin-top: 2.9rem;
          background-color: white;
          box-shadow: 0 0 2.14rem rgba(34,17,0,0.08);
          .liWrap {
            padding-left: 2.2rem;
            position: relative;
            .title {
              margin-top: 2.79rem;
              font-size: 1.43rem;
              
              color: rgba(51, 51, 51, 1);
              line-height: 1.43rem;
            }
            .leader {
              margin-top: 2.07rem;
            }
            p {
              margin-top: 0.9rem;
              color: #666666;
              font-size: 1rem;
              
              color: rgba(153, 153, 153, 1);
            }
            .apply .apply_yes {
              position: absolute;
              bottom: 0rem;
              right: 6.14rem;
            }
            .apply .apply_no{
              position: absolute;
              bottom: 0rem;
              right: 4rem;
            }
            .applyWord {
              position: absolute;
              bottom: 0rem;
              right: 3.21rem;
            }
          }
        }
        .ing {
          border-top: 5px solid #F3A40A;
        }
        .over {
          border-top: 5px solid #CCCCCC;
        }
      }
      #searchCom_mobile,.search-box-mobile{
        display: none;
      }
      #searchCom_pc {
        float: right;
        margin-top: 3.5rem;
        margin-bottom: 1rem;
        height: 2.43rem;
        position: relative;
        .searchBox {
          float: right;
          width: 20.71rem;
          height: 2.43rem;
          background: #FBFBFE;
          border: 1px solid #CCCCCC;
          border-radius: 1.14rem;
          padding-left: 15px;
        }
        .searchLogo{
          font-size: 1rem;
          cursor: pointer;
          position: absolute;
          right: 0.8rem;
          top: 0.8rem;
          color: #CCCCCC;
        }
      }
      .sureLogin{
        position: absolute;
        padding-bottom: 6rem;
        top:0;left: 0;
        width: 100%;
        min-height: calc(100% - 7.86rem) !important;
        background-color: #f6f7fb;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9;
      }
      .faWrap{
        width: 40rem;
        height: 33rem;
        text-align: center;
        .qrWrap{
          width: 100%;
          height: 70%;
        }
        p{
          width: 100%;
          height: 30%;
          text-align: center;
          padding-top: 2rem;
        }
      }
    }
  }

  @media screen and (max-width: 829px) {
    .training {
      /*background-color: #F6F7FB;*/
      height: 100%;
      * {
        box-sizing: border-box;
      }
      .content {
        width: 100%;
        height: 100%;
        clear: both;
      }
      .kind {
        font-size: 0.28rem;
        font-weight: bold;
        background-color: #FFFFFF;
        padding-left: 0.3rem;
        margin-bottom: 0.16rem;
        width: 83%;
        li {
          display: inline-block;
          margin-right: 0.5rem;
          color: #3E3A39;
          line-height: 1.05rem;
          border-bottom: 2px solid #F6F7FB;
        }
        li:last-child {
          margin-right: 0
        }
        li.active {
          color: #FD9D40
        }
      }
      .ing {
        border-bottom: 10px solid #F6F7FB;
        .type {
          background-color: #1DBDFD;
        }
      }
      .over {
        /*border-bottom: 10px solid #F6F7FB;*/
        .type {
          background-color: #1a1a1a;
        }
      }
      .ing,
      .over {
        background-color: #fff;
        margin-bottom: 0.16rem;
        padding: 0 0.32rem;
        position: relative;
        .type {
          position: absolute;
          top: 0;
          right: 0.3rem;
          font-size: 0.24rem;
          color: #fff;
          padding: 0.1rem 0.28rem;
        }
        .title {
          font-size: 0.32rem;
          padding: 0.5rem 0;
          font-weight: bold;
        }
        p {
          font-size: 0.26rem;
          color: #888;
          padding: 0.1rem 0;
          span {
            display: inline-block;
            width: 75%;
            vertical-align: top;
          }
        }
        .apply {
          display: none
        }
        .btn-box {
          padding: 0.5rem;
          height: 1.9rem;
        }
        #sign {
          width: 100%;
          line-height: 0.9rem;
          font-size: 0.32rem;
          vertical-align: top;
          background-color: #FD9D40;
        }
      }
      #searchCom_pc{
        display: none;
      }
      #searchCom_mobile{
        float: right;
        background-color: #FFFFFF;
        height: 1.05rem;
        line-height: 1.05rem;
        text-align: center;
        width: 17%;
        position: relative;
      }
      .search-box-mobile{
        transform: translateX(-825px);
        transition:all .3s linear;
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        height: 1.05rem;
        border-radius: 2px;
        background-color: #fff;
        input{
          width: 80%;
          display: inline-block;
          border-radius: 33px;
          height: 80%;
          margin-top: 1%;
          padding-left: 15px;
          font-size: .3rem;
          border: 1px solid #e2e2e5;
        }
      }

      .showTranslate{
        transform: translateX(0px);
      }
      .reduction,.sure{
        display: inline-block;
        width: 10%;
        height: 100%;
        text-align: center;
        font-size: 0.25rem;
        line-height: 1.05rem;
      }
      .reduction{
        float: left;
      }
      .sure{
        float: right;
      }
      .sureLogin{
        display: none;
      }
    }
  }
</style>
<template>
  <div class="training" v-loading.fullscreen.lock="fullscreenLoading">

    <div class="sureLogin" v-show="sureLogin">
      <div class="faWrap">
        <div class="qrWrap">
          <img src="../../static/img/sureLogin.png" alt="">
        </div>
        <p>请关注成都团校公众号，获取历史报名信息</p>
      </div>
    </div>
    <div class="wrapTraining">

      <el-row>
        <el-col :xs="20" :sm="14" :md="12" :lg="12" class="kind">
          <ul>
            <li :class="{'active':num==1}" @click="active(1)">全部</li>
            <li :class="{'active':num==2}" @click="active(2)">进行中</li>
            <li :class="{'active':num==3}" @click="active(3)">已结束</li>
          </ul>
        </el-col>

        <div id="searchCom_pc" class="search show-search">
          <div class="search-box">
            <input type="text" v-model="searchData" class="searchBox" @keyup.enter="setSearch()">
            <span class="icon-search searchLogo" @click="setSearch()"></span>
          </div>
        </div>

        <div id="searchCom_mobile">
          <span class="icon-search searchLogo" @click="openSearchBox"></span>
        </div>
        <div class="search-box-mobile"  :class="{'showTranslate':showSearch}">
          <div class="reduction" @click='closeSearchBox'><span class="icon-return return"></span></div>
          <input type="text" v-model="searchData" class="searchBox" @keyup.enter="setSearch()">
          <div class="sure" @click="setSearch"><span class="icon-search search"></span></div>
        </div>

        <ul class="content">
          <li @click="goActive(item)" v-for="(item,index) in trainingInfo" :class="item.State!=1?'over':'ing'">
            <div class="liWrap">
              <h3 class="title">{{item.Name}}</h3>
              <p class="leader">主&nbsp;&nbsp;讲&nbsp;人：
                <span>{{item.TeachersName}}</span>
              </p>
              <p>培训地点：
                <span>{{item.Address}}</span>
              </p>
              <p>培训对象：
                <span>{{item.Target}}</span>
              </p>
              <p>培训人数：
                <span>{{item.Number}}</span>
              </p>
              <p>培训时间：
                <span>{{$bw.format(item.StartTime,'date')}}</span>
              </p>
              <p>报名截止：
                <span>{{$bw.format(item.DeadLineTime,'dateTime')}}</span>
              </p>
              <!--<div class="apply">-->
                <!--<img class="apply_yes" src="../../static/img/报名.png" alt="" v-show="item.State==1" style="cursor: pointer">-->
                <!--<img class="apply_no" src="../../static/img/已结束.png" alt="" v-show="item.State==4" style="cursor: pointer;">-->
                <!--<span class="applyWord" v-show="item.State==1" style="cursor: pointer">报名</span>-->
              <!--</div>-->
              <!--<div class="btn-box">-->
                <!--<span id="sign" class="bw-btn bw-btn-warning" v-show="item.State==1">报名</span>-->
              <!--</div>-->
            </div>
            <!--<div class="type over" v-show="item.State==4">已结束</div>-->
            <!--<div class="type ing" v-show="item.State==1">报名中</div>-->
          </li>
        </ul>
      </el-row>
    </div>
  </div>
</template>
<script>
  //import search from '../components/search.vue'
  export default {
    data() {
      return {
        searchData: "",
        num: 1,
        fullscreenLoading: false,
        PageSize: 10,
        trainingInfo: [],
        requestData: {
          "Filter": [],
          "PageIndex": 1,
          "PageSize": 10,
          "Condition": []
        },
        showSearch:false,
        sureLogin:true
      }
    },
    components: {
//      search
    },
    methods: {
      openSearchBox(){
        this.showSearch = true
      },
      closeSearchBox(){
        this.showSearch = false
      },
      goActive(item) {
        this.$router.push({ path: '/personalTrainingInfo', query: { trainId: item.TrainId } })
      },
      active(index) {
        this.num = index
        if (index == 1) {
          var resultIndex = this.sumSerachData("state");
          if (resultIndex >= 0) {
            this.requestData.Filter.splice(resultIndex, 1);
          }
        }
        if (index == 2) {
          this.requestData.Filter=[];
          this.requestData.Condition=[];
          this.requestData.Filter.push({
            "GroupName": "state",
            "FieldName": "TrainClass.[State]",
            "FieldValue": 1,
            "SqlOperator": 3,
            "IsQuery": true
          })
          this.requestData.Filter.push({
            "GroupName": "state",
            "FieldName": "TrainClass.[State]",
            "FieldValue": 2,
            "SqlOperator": 3,
            "IsQuery": true
          })
          this.requestData.Filter.push({
            "GroupName": "state",
            "FieldName": "TrainClass.[State]",
            "FieldValue": 3,
            "SqlOperator": 3,
            "IsQuery": true
          })
          this.requestData.PageIndex = 1;
          this.requestData.PageSize = this.PageSize;
          this.requestData.Condition = this.requestData.Filter;
          this.$service('/api/WeChat/GetStudentTrain', 'post', this.requestData).then((response) => {
            this.fullscreenLoading = false;
            if (response.Data) { this.trainingInfo = response.Data.Items; } else {
              this.trainingInfo = [];
            }
            this.requestData.Filter=[];
            this.requestData.Condition=[];
          })
            .catch(err => {
              this.fullscreenLoading = false;
              this.requestData.Filter=[];
              this.requestData.Condition=[];
            })
        }
        if (index == 3) {
          var resultIndex = this.sumSerachData("state");
          if (resultIndex >= 0) {
            this.requestData.Filter[resultIndex].SqlOperator = 4;
          } else {
            this.requestData.Filter.push({
              "GroupName": "state",
              "FieldName": "TrainClass.[State]",
              "FieldValue": 4,
              "SqlOperator": 3,
              "IsQuery": true
            })
          }

        }
        this.getTrainingInfo(1);
      },

      getTrainingInfo(PageIndex) {
        this.requestData.PageIndex = PageIndex;
        this.requestData.PageSize = this.PageSize;
        this.requestData.Condition = this.requestData.Filter;
        this.$service('/api/WeChat/GetStudentTrain', 'post', this.requestData).then((response) => {
          this.fullscreenLoading = false;
          if (response.Data) { this.trainingInfo = response.Data.Items; } else {
            this.trainingInfo = [];
          }
        })
          .catch(err => {
            this.fullscreenLoading = false;
          })
      },

      sumSerachData(name) {
        for (var i = 0; i < this.requestData.Filter.length; i++) {
          var item = this.requestData.Filter[i];
          if (item.GroupName == name) {
            return i
          }
        }
        return -1;
      },
      setSearch() {
        var resultIndex = this.sumSerachData("Namexx");
        if (this.searchData.length < 1) {
          if (resultIndex >= 0) {
            this.requestData.Filter.splice(resultIndex, 1);
            return;
          }
        } else {
          if (resultIndex >= 0) {
            this.requestData.Filter[resultIndex].FieldValue = this.searchData;
          } else {
            this.requestData.Filter.push({
              "GroupName": "Namexx",
              "FieldName": "Name",
              "FieldValue": this.searchData,
              "SqlOperator": 0,
              "IsQuery": true
            })
          }

        }
        this.getTrainingInfo(1);
      }
    },
    props: ['rootInfo'],
    mounted() {
      this.getTrainingInfo(1);
      if (document.body.offsetWidth || window.screen.width < 829) {
        this.rootInfo.showFooter = false;
      } else {
        this.rootInfo.showFooter = true;
      }

      var IsMerge = this.$bw.getStorage("userInfo").IsMerge
      if(IsMerge){
        this.sureLogin = false
      }else {
        setInterval(()=>{
          this.$service('/api/WeChat/GetStudentDetail', 'get', {}).then((response) => {
            if(response.Data){
              this.sureLogin = !response.Data.IsMerge
              var userInfo = this.$bw.getStorage("userInfo")
              userInfo.IsMerge=response.Data.IsMerge;
              var userInfos = {
                info: {
                },
                name: "userInfo"
              }
              userInfos.info = userInfo;
              this.$bw.addStorage(userInfos);
              if(response.Data.IsMerge){
                window.location.reload()
              }
            }
          }).catch(err => {

          })
        },200)
      }
    },
  }

</script>
